<template>
  <div class="suggest" @click="searched(suggest.name)">
    <div class="names" v-if="suggest.suggests_names">
      <div
        class="name"
        v-for="(item, index) in suggest.suggests_names"
        :key="index"
        :class="{ nameb: item.is_bold }"
      >
        {{ item.suggests_name }}
      </div>
    </div>
    <div class="names" v-else>{{ suggest.name }}</div>
    <div
      class="tag"
      v-if="suggest.tag"
      :style="{
        borderColor: suggest.tag.border_color,
        color: suggest.tag.text_color,
        backgroundColor: suggest.tag.background_color,
      }"
    >
      {{ suggest.tag.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { useDouguoStore } from "@/stores/douguo";
import { ref } from "vue";
import { useRouter } from "vue-router";

const route: object = useRouter();

const douguo = useDouguoStore();

const { updataSearch } = douguo;

const props = defineProps(["suggest"]);

const searched = (kw: string) => {
  let historySearch = new Set(
    JSON.parse(localStorage.getItem("historySearch") || "[]")
  );
  // console.log(historySearch);

  // console.log(route.currentRoute.value);

  if (route.currentRoute.value.name == "search") {
    router.push({ path: "/searched", query: { kw } });
  } else {
    router.replace({ path: "/searched", query: { kw } });
  }

  historySearch.add(kw);
  // console.log(historySearch);

  localStorage.setItem(
    "historySearch",
    JSON.stringify(Array.from(historySearch))
  );

  // 更新搜索结果
  let obj1: object = ref({
    keyword: kw,
    order: 0,
    type: 0,
    offset: 0 * 20,
    limit: 1 * 20,
  });
  updataSearch(obj1);
};
</script>

<style lang="scss" scoped>
.suggest {
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
  cursor: pointer;

  .names {
    font-size: 16px;
    display: flex;
    align-items: center;

    .nameb {
      font-weight: bold;
    }
  }

  .tag {
    font-size: 14px;
    width: 50px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    border-radius: 12px;
    border: 2px solid white;
  }
}
</style>
